<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        攻防训练情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成攻击总人数</div>
                                    <div class="count pear-text">122</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">完成防御总人数</div>
                                    <div class="count pear-text">323</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确性得分</div>
                                    <div class="count pear-text">100</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确率</div>
                                    <div class="count pear-text">85%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        考试情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">目前考试最高得分</div>
                                    <div class="count pear-text">88</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">合格率</div>
                                    <div class="count pear-text">98%</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">攻防形式</div>
                                    <div class="count pear-text">3次互换</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均考核时间</div>
                                    <div class="count pear-text">3:27</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">识别结果</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
       <!-- 
            <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p>{{ i.device }}</p>
                            <p>{{ i.fstype }}</p>
                            磁盘大小&nbsp;<span>{{ i.total }}M</span>&nbsp;&nbsp;
                            空闲大小&nbsp;<span>{{ i.free }}M</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            已经使用&nbsp;<span>{{ i.used }}M</span>&nbsp;&nbsp;
                            使用概率&nbsp;<span>{{ i.percent }}%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div> 
        -->
        <div class="layui-card">
            <div class="layui-card-header">考核信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>参考人数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>得分最高人员</th>
                        <th>帅小伙</th>
                    </tr>    
                    <tr>
                        <th>得分最低人员</th>
                        <th>丑小伙</th>
                    </tr>

                    <tr>
                        <td>考试总场次</td>
                        <td>{{ system_version }}</td>
                    </tr>
                    <tr>
                        <td>考核成绩合格人数</td>
                        <td>94</td>
                    </tr>
                    <tr>
                        <td>考核成绩不合格人数</td>
                        <td>6</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records');
        var myChart = echarts.init(chartDom);
        var option;
        
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        option = {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            right: '20%'
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['完成防御人数', '完成攻击人数', '考试合格人数']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              // prettier-ignore
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel: {
                formatter: '{value} 人次'
              }
            },
            {
              type: 'value',
              name: '人数',
              position: 'right',
              alignTicks: true,
              offset: 80,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisLabel: {
                formatter: '{value} 人次'
              }
            },
            {
              type: 'value',
              name: '人数',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[2]
                }
              },
              axisLabel: {
                formatter: '{value} °人次'
              }
            }
          ],
          series: [
            {
              name: '完成防御人数',
              type: 'bar',
              data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
              ]
            },
            {
              name: '完成攻击人数',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: '考试合格人数',
              type: 'line',
              yAxisIndex: 2,
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
          ]
        };
        
        option && myChart.setOption(option);
        
        });
</script>
</body>
</html>